<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">
    <!-- PC -->
    <link rel="stylesheet" href="../static/css/LackChase.css" media="only screen and (max-height:1600px) ">
</head>

<body>
    <!--头部-->
    <!-- <div class="header">
        出库看板
    </div> -->
    <!--主体-->
    <div class="main clearfix" id="app">

        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul class="header-text">
                                <li>
                                    <h8 style="line-height: 78px;">材料缺料及采购追踪</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content">
                        <div class="card_header">
                            <div class="card C" style=" background: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>7天待收货</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="WaitQtyReceipt">{{shou}}款</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C" style="background:#33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>7天后待收货</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Col8Qty1">{{shouhou}}款</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card_header">
                            <div class="card C" style="background-color: #d9d916;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>7天缺料</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="WaitPrtQty" style="color: white;">{{defaultDt1.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C B" style="background: #FF0000;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>收货逾期</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Col7Qty1" style="color: white;">{{yu}}款</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="main-left">
            <div class="border-container">
                <div class="name-title">
                    7天内缺料预警
                </div>
                <div>
                    <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'ascending'}" stripe="true" ref="defaultDt1" :height=el_table_height>
                        <el-table-column prop="MatlName" align="center" width="180" label="材料名称">
                        </el-table-column>
                        <el-table-column prop="MatlSortName" align="center" label="材料分类">
                        </el-table-column>
                        <el-table-column prop="QtyActWM" align="center" label="实时库存数">
                        </el-table-column>
                        <el-table-column prop="QtyRoad" align="center" label="采购在途">
                        </el-table-column>
                        <el-table-column align="center" width="180" label="缺料数">
                            <template scope="scope">
                                <span style="color:red">{{ scope.row.QtyShort}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="main-right">
            <div class="border-container">
                <div class="name-title">
                    材料采购追踪
                </div>
                <div>
                    <el-table :data="defaultDt2" :default-sort="{prop: 'date', order: 'ascending'}" stripe="true" :height=el_table_height ref="defaultDt2">
                        <el-table-column prop="POID" align="center" label="采购单号">
                        </el-table-column>
                        <el-table-column prop="GoodsName" align="center" width="200" label="材料名称">
                        </el-table-column>
                        <el-table-column prop="RevDate" :formatter="formatterTime" align="center" label="计划交期">
                        </el-table-column>
                        <el-table-column prop="" align="center" label="收货数/采购数">
                            <template slot-scope="scope">
                                <div v-html="Cutout(scope)">
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Received" align="center" label="待收数量">
                        </el-table-column>
                        <el-table-column align="center" label="采购状态">
                            <template slot-scope="scope">
                                <div v-html="Status(scope)">
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>

</body>



<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height: 850,
                defaultDt1: [],
                defaultDt2: [],
                shou:0,
                shouhou:0,
                yu:0
            }
        },
        methods: {
            GetTabelDate(that) {
                // 七天内缺料预警
                GetCodeData("VB22040111132265", "Get", "Goods").then(function(res) {
                        that.defaultDt1 = res.rows
                    }),
                    //材料采购追踪
                    GetCodeData("VB22040117131885", "Get", "Goods").then(function(res) {
                        that.defaultDt2 = res.rows
                        that.shou = 0;
                        that.shouhou = 0;
                        that.yu = 0;
                        res.rows.forEach(element => {
                            //收货逾期
                            if(element.Isoverdue == 1){
                                that.yu++;
                            }
                            //7天待收货 包含逾期未收的部分
                            if(element.ⅦIsWait == 1){
                                that.shou++;
                            }
                            //7天后待收货
                            if(element.NotⅦIsWait == 1){
                                that.shouhou++;
                            }
                        });
                    })
            },
            formatterTime(row, column) {
                let data = row[column.property]
                return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
            },
            Cutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.QtyReceipt * 100 / cellValue.row.Quantity;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.QtyReceipt < cellValue.row.Quantity) {
                        _color = "#00a000";
                    } else if (cellValue.row.QtyReceipt > cellValue.row.Quantity) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.Quantity > 0) {
                        _html += ("<div  style='border-radius:15px;position: relative; padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;margin: 0;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:white;font-size: 13px;'>" + cellValue.row.QtyReceipt + "/" + cellValue.row.Quantity + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += ("</div>" +
                            "");
                    }
                    return _html;
                }
            },
            Status(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    if (cellValue.row.overdue > 0 ) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:80px;padding: 0px;background:#4199fe;overflow: hidden;height:28px;'><div style='border-radius:15px;width: 100%; display: block; position: relative; background: #ff0000; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:white;font-size: 16px;'>" +"逾"+ cellValue.row.overdue + "天"+"</div>" +
                            "</div>" +
                            "");
                    } else if(cellValue.row.NotOverdue >= 0 ) {
                        _html += ("<div  style='border-radius:15px;position: relative; width:80px;padding: 0px;background:#4199fe;overflow: hidden;height:28px;'><div style='border-radius:15px;width: 100%; display: block; position: relative; background:#00a000;color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:white;font-size: 16px;'>" +"剩"+ cellValue.row.NotOverdue + "天"+"</div>" +
                            "</div>" +
                            "");
                    }
                    return _html;
                }
            },
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>